<template>
  <div>
    <el-table :data="list" border stripe style="width: 100%">
      <el-table-column label="序号" width="60px" type="index" :index="indexMethod" />
      <el-table-column prop="host" label="站点" min-width="100px" />
      <el-table-column prop="taskid" label="任务id" min-width="160px" />
      <el-table-column label="路径">
        <template #default="{ row }">
          {{ row.dirpath === '' ? '无' : row.dirpath }}
        </template>
      </el-table-column>
      <el-table-column label="模板">
        <template #default="{ row }">
          {{ row.template === null ? '-' : row.template }}
        </template>
      </el-table-column>
      <el-table-column label="类型">
        <template #default="{ row }">
          {{ translateTaskType(row.tasktag) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="{ row }">
          {{ translateStatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="From">
        <template #default="{ row }">
          {{ row.operator || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="请求时间">
        <template #default="{ row }">
          {{ formatDate(row.requestAt) }}
        </template>
      </el-table-column>
      <el-table-column label="执行时间">
        <template #default="{ row }">
          {{ formatDate(row.startedAt) }}
        </template>
      </el-table-column>
      <el-table-column label="完成时间">
        <template #default="{ row }">
          {{ formatDate(row.finishedTimes) }}
        </template>
      </el-table-column>
      <el-table-column v-if="isAdmin" label="操作" width="100px">
        <template #default="{ row }">
          <el-button v-if="canCancel(row)" type="danger" size="mini" @click="$emit('cancel-task', row)">
            取消请求
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="limit"
      :page-sizes="[15, 30, 60, 100]"
      :total="total"
      layout="total, sizes, prev, pager, next"
      class="pagination"
      @current-change="$emit('page-change', $event)"
      @size-change="$emit('size-change', $event)"
    />
  </div>
</template>

<script>
import { TASK_TAG, DEPLOY_STATUS } from '@/assets/data/constants'
export default {
  name: 'TaskLogTable',
  props: {
    list: Array,
    page: Number,
    limit: Number,
    total: Number
  },
  computed: {
    isAdmin() {
      return this.$store.getters.roles.includes('admin')
    }
  },
  methods: {
    indexMethod(index) {
      return (this.page - 1) * this.limit + index + 1
    },
    formatDate(utcStr) {
      if (!utcStr) return ''
      return new Date(utcStr).toLocaleString()
    },
    translateTaskType(code) {
      switch (code) {
        case TASK_TAG.NEW: return '创建'
        case TASK_TAG.PUSH: return '推送'
        case TASK_TAG.ADD_AD: return '添加广告'
        case TASK_TAG.REMOVE_AD: return '移除广告'
        case TASK_TAG.DESTROY: return '销毁站点'
        case TASK_TAG.REPUSH: return '复推'
        case TASK_TAG.ADD_D_CONFIG: return '默认配置+'
        case TASK_TAG.USED_D_CONFIG: return '移除站点tags'
        case TASK_TAG.CANCELED_D_CONFIG: return '恢复站点tags'
        default: return `-`
      }
    },
    translateStatus(code) {
      switch (code) {
        case DEPLOY_STATUS.PRIORITY: return '待执行'
        case DEPLOY_STATUS.PENDING: return '排队中'
        case DEPLOY_STATUS.IN_PROGRESS: return '正在执行..'
        case DEPLOY_STATUS.SKIPPED: return '已完成'
        case DEPLOY_STATUS.DONE: return '已完成'
        case DEPLOY_STATUS.FAILED: return '失败'
        case DEPLOY_STATUS.CANCELED: return '(被取消)'
        default: return code
      }
    },
    canCancel(row) {
      const cancelableStatus = [
        DEPLOY_STATUS.PRIORITY,
        DEPLOY_STATUS.PENDING,
        DEPLOY_STATUS.IN_PROGRESS
      ]
      return cancelableStatus.includes(row.status)
    }
  }
}
</script>

<style>
.el-table {
  font-size: 11px !important;
}

.el-table[size="small"] .el-table__row,
.el-table .el-table__body-wrapper tbody tr.el-table__row {
  height: 35px !important;
  line-height: 35px !important;
}

.el-table .el-table__body-wrapper tbody tr.el-table__row>td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.el-table .el-table__header-wrapper thead tr {
  height: 35px !important;
  line-height: 35px !important;
}

.el-table .el-table__header-wrapper thead tr>th {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.el-button {
  font-size: 12px !important;
}
</style>
